
<template>
    <div class="typecontent">
        <div class="sb_navbar_div">
            <div class="iconfont icon-xiaoxizhongxin"></div>
            <div class="iconfont icon-sousuo" @click="goToSearch()">{{ msg }}</div>
            <div class="iconfont icon-gouwuche" @click="gotoShopBar()"></div>
        </div>
        <div class="header">
            <div v-for="( item , i ) of typecontent.cget.sortFilter" :key="'sort'+i" @click="TypeContentListClass({'fcid':typecontent.cget.param.fcid,'sort':item.sortKey})">
                <span>{{ item.title }}</span>
            </div>
        </div>
        <div class="content">
            <div class="wrapper " ref="typecontent">
                <div>
                    <SellContent :content="typecontent.clist"></SellContent>
                </div>
            </div>
        </div>
    </div>
</template> 

<script>
import BScroll from "better-scroll";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
    data() {
        return {
            id: null,
            search: null,
            msg:null
        };
    },
    computed: {
        ...mapState(["typecontent"])
    },
    methods: {
        typeContentScroll() {
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.typecontent, {
                    click: true
                });
            });
        },
        goToSearch() {
            this.$router.push({ path: "/search" });
        },
        gotoShopBar(){
            this.$router.push({ path: "/mogujie/car" });
        },
        ...mapActions(["TypeContentList"]),
        ...mapActions(["TypeContentListClass"]),
        ...mapActions(["TypeContentBySearch"])
    },
    components: {},
    mounted() {
        this.typeContentScroll();
        this.msg = this.$route.params.msg;
        this.TypeContentList(this.$route.params.id);
        this.TypeContentBySearch(this.$route.params.search);
    }
};
</script>

<style lang='less' scoped>
.typecontent {
    .sb_navbar_div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100px;
        div {
            font-size: 50px;/*px*/
            color: black;
        }
        .icon-sousuo {
            width: 560px;
            height: 60px;
            font-size: 30px;/*px*/
            border: 1px solid #ccc;
            border-radius: 10px;
            padding-left: 30px;
            background: #ebebeb;
            line-height: 60px;
        }
    }
    .header {
        width: 100%;
        height: 97px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2px solid #ccc;
        border-bottom: 1px solid #ccc;
        div {
            width: 33%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-right: 1px solid #ccc;
        }
    }
    .content {
        width: 100%;
        position: absolute;
        top: 200px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        .wrapper {
            width: 100%;
            height: 100%;
            > div {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
            .null {
                width: 348px;
                height: 0px;
            }
        }
    }
}
</style>
